
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="author" content=" " />
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#slidepanel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
	 
});
</script>
<style type="text/css">
body {
	margin: 0 auto;
	padding: 0;
	width: 55em;
	font-family: Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#slidepanel {
	background: #acae77;
	height: 200px;
	display: none;
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #000;
	background: #acae77;
}
.btn-slide {
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	color: #000;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}
</style>
		<title>learning JQuery - slide panel</title>
	</head>
	<body>
	<div id="slidepanel">
		some content here just to see what happens
	</div>
	<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
	<h1>testing a header and additional page content</h1>
	<p>Ipsum dolor sit amet consectetuer adipiscing elit sed. Zzril delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum soluta. Qui blandit praesent luptatum nobis eleifend option congue nihil imperdiet doming, id quod mazim. Typi qui nunc nobis videntur parum clari fiant sollemnes in.
</p>
	<p>
Delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum? Quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta. Iriure dolor in, hendrerit in vulputate velit esse molestie. Eorum claritatem Investigationes demonstraverunt lectores legere me lius. Feugiat nulla facilisis at vero eros et, accumsan et iusto odio dignissim qui blandit praesent. Lectorum mirum est notare quam littera gothica, decima eodem modo typi qui?
</p>
	<p>
Sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait. Saepius claritas est etiam processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est. Consequat duis autem vel eum iriure dolor in hendrerit, in vulputate velit. Congue nihil imperdiet doming id quod mazim placerat! Suscipit lobortis nisl ut aliquip ex ea commodo esse molestie consequat. Typi non habent claritatem insitam est usus; legentis in iis qui facit eorum. Legere me lius quod ii legunt notare quam littera gothica quam nunc putamus parum claram anteposuerit.
</p>
	</body>
</html>